<template>
  <view class="content">
    <!-- 滑块区域 -->
    <view class="swiper">
      <swiper
        class="swiper"
        :autoplay="true"
        :interval="3000"
        :duration="500"
        @change="changeSwiper"
      >
        <swiper-item v-for="item in cover_display" :key="item">
          <view class="swiper-image">
            <image :src="item" />
          </view>
        </swiper-item>
      </swiper>
      <!-- 轮播指示点样式修改 -->
      <view class="dots">
        <view v-for="(item, index) in cover_display.length" :key="index">
          <view
            class="dot"
            :class="index === swiperCurrent ? ' active' : ''"
          />
        </view>
      </view>
    </view>
    <!-- 主体卡片区域 -->
    <view
      :class="
        productTicket.status && devtools === 'ios'
          ? 'card-content card-content-ios'
          : productTicket.status && devtools !== 'ios'
            ? 'card-content'
            : productTicket.status === false && devtools === 'ios'
              ? 'card-content card-content-bottom-ios'
              : 'card-content card-content-bottom'
      "
    >
      <!-- 商品名称 -->
      <view class="trade_name">{{
        productTicket.name
      }}</view>
      <!-- 商品信息 -->
      <view class="trade_info">
        <view
          v-for="item in productTicket.attribute"
          :key="item.key"
          class="trade_info_view"
        >
          <view class="trade_info_key">{{ item.value }}</view>
          <view class="trade_info_value">{{ item.key }}</view>
        </view>
      </view>
      <!-- 富文本内容 -->
      <view
        v-for="item in productTicket.content"
        :key="item.title"
        class="trade_rich"
      >
        <view class="trade_rich_top">
          <text class="trade_rich_icon" />
          <text class="trade_rich_title">{{ item.title }}</text>
        </view>
        <view class="trade_rich_bottom" v-html="item.content" />
      </view>
    </view>
    <view v-if="devtools === 'ios'" style="height: 1px" />
    <!-- 底部按钮 -->
    <view
      v-if="productTicket.status"
      ref="bottom"
      :class="devtools === 'ios' ? 'bottom-ios' : 'bottom'"
    >
      <button open-type="share" class="no-frame">
        <image src="@/static/image/home/share.png" />
        <text>分享</text>
      </button>
      <button v-if="type==='TICKET'" class="buyTickets" @click="jumpToOrder">
        立即购票 ￥{{ productTicket.price ? productTicket.price : "" }}
      </button>
      <button v-else class="buyTickets" @click="openEject">
        立即购票
      </button>
    </view>
    <view
      v-else
      :class="devtools === 'ios' ? 'off-the-shelf-ios' : 'off-the-shelf'"
    >
      <text>该商品已经下架</text>
    </view>
    <!-- 弹出框 -->
    <selfPopup :product-uid="uid" :name="productTicket.name" :show="show" :query="productTicket.get_packages" @close="closeEject" />
  </view>
</template>

<script>
import { getProductTicket } from '@api/poduct'
import { getSelfProduct } from '@api/self'
import { get } from '@utils/storage'
import selfPopup from '@com/self/selfPopup'
export default {
  onLoad(option) {
    this.uid = option.uid
    this.type = option.type
    this.display = option.display
    switch (this.type) {
      case 'TICKET' :
        this.getProductTicket()
        break
      case 'SELF' :
        this.getSelfProduct()
        break
    }
  },
  components: { selfPopup },
  data() {
    return {
      uid: null,
      type: null,
      cover_display: null,
      display: null,
      productTicket: {
        status: true
      },
      swiperCurrent: 0,
      show: false
    }
  },
  computed: {
    devtools() {
      return get('devtools')
    }
  },
  methods: {
    // 刷新
    onPullDownRefresh() {
      switch (this.type) {
        case 'TICKET' :
          this.getProductTicket()
          break
        case 'SELF' :
          this.getSelfProduct()
          break
      }
    },
    stopPullDownRefresh() {
      uni.stopPullDownRefresh()
    },
    // 普通门票
    getProductTicket() {
      getProductTicket(this.uid).then((res) => {
        this.cover_display = res.data.data.cover_display
        this.productTicket = res.data.data
        this.productTicket.status = !!parseInt(this.productTicket.status)
        this.stopPullDownRefresh()
      })
    },
    // 自营门票
    getSelfProduct() {
      getSelfProduct(this.uid).then((res) => {
        this.cover_display = res.data.data.cover_display
        this.productTicket = res.data.data
        this.productTicket.status = !!parseInt(this.productTicket.status)
        if (this.display === 'true') {
          this.show = true
        }
        this.stopPullDownRefresh()
      })
    },
    // 监听滑块索引的改变
    changeSwiper(e) {
      this.swiperCurrent = e.detail.current
    },
    // 跳转下单页面
    jumpToOrder() {
      if (this.productTicket.product_category_display === 'SINGLE') {
        // 跳转非套票
        uni.navigateTo({
          url: `/pages/order/single?uid=${this.uid}`
        })
      } else {
        // 跳转套票
        uni.navigateTo({
          url: `/pages/order/package?uid=${this.uid}`
        })
      }
    },
    // 打开弹出框
    openEject() {
      this.show = true
    },
    // 关闭弹出框
    closeEject() {
      this.show = false
    }
  }
}
</script>

<style>
/* 顶部滑块区域 */
.swiper {
  position: relative;
  height: 540rpx;
}
.swiper-image {
  width: 100%;
  height: 540rpx;
}
.swiper-image > image {
  width: 100%;
  height: 100%;
}
/* 指示点样式修改 */
.dots {
  position: absolute;
  width: 100%;
  height: 8rpx;
  bottom: 64rpx;
  z-index: 199;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.dot {
  width: 20rpx;
  height: 8rpx;
  transition: all 0.5s;
  background-color: #ffffff;
  margin-right: 10rpx;
}
.active {
  width: 40rpx;
  height: 8rpx;
  background-color: #306de9;
}
/* 主体卡片区域 */
.card-content {
  width: 750rpx;
  background-color: #ffffff;
  border-radius: 40rpx;
  margin-bottom: 160rpx;
  position: relative;
  top: -34rpx;
}
.card-content-ios {
  margin-bottom: 220rpx;
}
.card-content-bottom {
  margin-bottom: 120rpx;
}
.card-content-bottom-ios {
  margin-bottom: 190rpx;
}
.trade_name {
  height: 100rpx;
  font-size: 36rpx;
  color: #000000;
  font-weight: 600;
  text-align: center;
  line-height: 100rpx;
}
.trade_info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 710rpx;
  margin-left: 20rpx;
  border-bottom: 2rpx solid #f1f1f1;
}
.trade_info_view {
  width: 33%;
  margin-bottom: 20rpx;
}
.trade_info_key {
  color: #306de9;
  font-size: 32rpx;
  font-weight: 600;
  text-align: center;
}
.trade_info_value {
  text-align: center;
  color: #9b9b9b;
  font-size: 24rpx;
  font-weight: 500;
  margin-top: 14rpx;
}
.trade_rich {
  margin-top: 40rpx;
}
.trade_rich_top {
  display: flex;
  height: 44rpx;
}
.trade_rich_icon {
  width: 8rpx;
  height: 32rpx;
  background-color: #306de9;
  margin-left: 20rpx;
  margin-top: 6rpx;
}
.trade_rich_title {
  font-size: 32rpx;
  font-weight: 600;
  color: #000000;
  margin-left: 10rpx;
}
.trade_rich_bottom {
  width: 690rpx;
  margin-left: 30rpx;
  margin-top: 20rpx;
  text-align: left;
  word-wrap: break-word;
  word-break: normal;
  letter-spacing: 0.1em;
}
.trade_rich_bottom /deep/ rich-text {
  font-size: 28rpx;
  width: 690rpx;
  color: #4a4a4a;
}
.trade_rich_bottom /deep/ .wscnph {
  display: block;
  width: 690rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
/* 底部按钮 */
.bottom {
  position: fixed;
  height: 140rpx;
  width: 750rpx;
  bottom: 0;
  z-index: 100;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  display: flex;
}
.bottom-ios {
  position: fixed;
  height: 200rpx;
  width: 750rpx;
  bottom: 0;
  z-index: 100;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  display: flex;
}
.no-frame {
  padding: 0;
  margin: 0;
  width: 56rpx;
  margin-left: 66rpx;
  background-color: #ffffff;
}
.no-frame > image {
  display: block;
  width: 48rpx;
  height: 48rpx;
  margin: 0;
  margin-top: 14rpx;
  margin-left: 4rpx;
}
.no-frame > text {
  display: block;
  margin: 0;
  font-size: 28rpx;
}
.no-frame::after {
  border: none;
}
.buyTickets {
  width: 544rpx;
  background-color: #306de9;
  padding: 0;
  margin-top: 0;
  height: 80rpx;
  margin-left: 52rpx;
  text-align: center;
  margin-top: 28rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  white-space: pre;
  color: #ffffff;
}
.safe-area {
  height: 68rpx;
}
/* 商品下架 */
.off-the-shelf {
  position: fixed;
  width: 750rpx;
  height: 96rpx;
  line-height: 96rpx;
  bottom: 0;
  z-index: 100;
  background-color: #cccccc;
  font-size: 32rpx;
  color: #ffffff;
  text-align: center;
}
.off-the-shelf-ios {
  position: fixed;
  width: 750rpx;
  height: 156rpx;
  line-height: 96rpx;
  bottom: 0;
  z-index: 100;
  background-color: #cccccc;
  font-size: 32rpx;
  color: #ffffff;
  text-align: center;
}
</style>
